<template>
  <div class="com-container"  v-loading="loading" element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <rz-height></rz-height>
    <el-row :gutter="10">
      <el-col :span="8" class="col_wapper">
        <div>累计注册人数</div>
        <div>
          <span class="number">
            <countTo
              :startVal="startVal"
              :endVal="data.signTotal || 0"
              :duration="3000"
            ></countTo>
          </span>
          人
        </div>
        <div>
          今日注册<span class="people">
            <countTo
              :startVal="startVal"
              :endVal="data.signToday || 0"
              :duration="3000"
            ></countTo></span
          >人
        </div>
      </el-col>
      <el-col :span="8" class="col_wapper center_border">
        <div>累计添加单位数</div>
        <div>
          <span class="number">
            <countTo
              :startVal="startVal"
              :endVal="data.cpyAddTotal || 0"
              :duration="3000"
            ></countTo>
          </span>
          家
        </div>
        <div>
          今日添加<span class="people">
            <countTo
              :startVal="startVal"
              :endVal="data.cpyAddToday || 0"
              :duration="3000"
            ></countTo> </span
          >家
        </div>
      </el-col>
      <el-col :span="8" class="col_wapper">
        <div>累计登录次数</div>
        <div>
          <span class="number"
            ><countTo
              :startVal="startVal"
              :endVal="data.loginTotal || 0"
              :duration="3000"
            ></countTo>
          </span>
          次
        </div>
        <div>
          今日登录<span class="people">
            <countTo
              :startVal="startVal"
              :endVal="data.loginToday || 0"
              :duration="3000"
            ></countTo></span
          >次
        </div>
      </el-col>
    </el-row>
    <rz-height></rz-height>
    <rz-height></rz-height>
    <div style="width: 620px; height: 580px;margin:0 auto" class="map">
      <!-- <el-switch
        v-model="value"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="单位"
        inactive-text="人数"
      >
      </el-switch> -->


  <el-button-group class="switch">
  <el-button :type="value?'primary':''" @click="value=true"  size="mini" >单位</el-button>
  <el-button :type="!value?'primary':''" @click="value=false" size="mini" >人数</el-button>
</el-button-group>


      <div
        class="region"
        v-for="(item,index) in bodyindustryLIst"
        :key="index"
        :class="[regionClass(index)]"
      >
        <div v-if="value">{{ item.quantityResponse.cumulativeCompaniesRegistered }}家</div>
        <div v-else>{{ item.quantityResponse.cumulativeRegistrations}}人</div>

        <div>{{ item.areaName }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request';
import countTo from 'vue-count-to';
var echarts = require('echarts');
export default {
  created() {
    this.findQuantity()
  },
  props: {
    code: {
      type: String,
      default: '320500',
    },
  },
  components: {
    countTo,
  },
  data() {
    return {
      loading:true,
      value: false,
      data: {},
      myChart: '',
      startVal: 0,
      classList: [
        {
          key: '高新区',
          value: 'gaoxinqu',
        },
        {
          key: '吴中区',
          value: 'wuzhongqu',
        },
        {
          key: '相城区',
          value: 'xiangcehngqu',
        },
        {
          key: '姑苏区',
          value: 'gusuqu',
        },
        {
          key: '工业园区',
          value: 'gongyeyuan',
        },
        {
          key: '常熟市',
          value: 'changshu',
        },
        {
          key: '张家港市',
          value: 'zhangjiagang',
        },
        {
          key: '昆山市',
          value: 'kunshan',
        },
        {
          key: '吴江区',
          value: 'wujiang',
        },
        {
          key: '太仓市',
          value: 'taicang',
        },
        {
          key: '张家港保税区',
          value: 'zhangjiagangbaoshui',
        },
      ],
      bodyindustryLIst:[]
    };
  },
  mounted() {
    this.queryInfo();
  },
  destroyed() {},
  methods: {
    regionClass(params) {
      return this.classList.filter((x,index)=>index=== params)[0].value;
    },
    // initEcharts() {
    //   this.myChart = echarts.init(document.getElementById("map"));
    //   echarts.registerMap("js", suzhoudata);
    //   var option = {
    //     tooltip: {
    //       show: true,
    //       trigger: "item",
    //       formatter: function (e, t) {
    //         return e.name + "<br/>" + `累计注册${e.value}人`
    //       },
    //     },
    //     visualMap: {
    //       // backgroundColor: "#2A589E",
    //       min: 0,
    //       max: 1000,
    //       left: 0,
    //       bottom: 0,
    //       showLabel: true,
    //       pieces: [
    //         {
    //           gt: 1000,
    //           label: ">1000",
    //           color: "#0033EE",
    //         },
    //         {
    //           gte: 500,
    //           lte: 1000,
    //           label: "500-1000",
    //           color: "#003C9D",
    //         },
    //         {
    //           gte: 100,
    //           lte: 499,
    //           label: "100-499",
    //           color: "#0044BB",
    //         },
    //         {
    //           gte: 0,
    //           lt: 100,
    //           label: "小于100",
    //           color: "#0066FF",
    //         },
    //       ],
    //       show: true,
    //       textStyle: {
    //         color: "#fff",
    //       }
    //     },
    //     series: [
    //       {
    //         data: this.data.cityInfoList.map(x=>{
    //           x.name=x.bodyindustry
    //           x.value=x.count
    //           return x
    //         })
    //         // [
    //         //   {
    //         //     name: "虎丘区",
    //         //     value: 3433434353,
    //         //   },
    //         //   {
    //         //     name: "吴中区",
    //         //     value: 32353434,
    //         //     info: "10.3万人/1000/0.7%",
    //         //   },
    //         //   {
    //         //     name: "相城区",
    //         //     value: 54353435,
    //         //     info: "10.3万人/1000/0.7%",
    //         //   },
    //         //   {
    //         //     name: "姑苏区",
    //         //     value: 3512312,
    //         //     info: "10.3万人/1000/0.7%",
    //         //   },
    //         //   {
    //         //     name: "吴江区",
    //         //     value: 233,
    //         //     info: "10.3万人/1000/0.7%",
    //         //   },
    //         //   {
    //         //     name: "苏州工业园区",
    //         //     value: 45,
    //         //     info: "10.3万人/1000/0.7%",
    //         //   },
    //         //   {
    //         //     name: "常熟市",
    //         //     value: 445,
    //         //     info: "10.3万人/1000/0.7%",
    //         //   },
    //         //   {
    //         //     name: "张家港市",
    //         //     value: 2342,
    //         //     info: "10.3万人/1000/0.7%",
    //         //   },
    //         //   {
    //         //     name: "昆山市",
    //         //     value: 11000,
    //         //     info: "10.3万人/1000/0.7%",
    //         //   },
    //         //   {
    //         //     name: "太仓市",
    //         //     value: 2342,
    //         //     info: "10.3万人/1000/0.7%",
    //         //   },
    //         // ]
    //         ,
    //          zoom:1.2,
    //         type: "map",
    //         map: "js",
    //         emphasis: {
    //           areaColor: "#141C34",
    //           borderWidth: 1,
    //           color: "green",
    //           itemStyle: {
    //             borderColor: "#2980b9",
    //             borderWidth: 0,
    //             areaColor: "#00B3FE",
    //           },
    //           label: {
    //             show: true,
    //             fontSize: "11",
    //             color: "#ffffff",
    //           },
    //         },
    //         label: {
    //           show: true,
    //           fontSize: "11",
    //           color: "#ffffff",
    //         },
    //       },
    //     ],
    //   };
    //   this.myChart.setOption(option);
    //   this.myChart.on("mousedown", (params) => {
    //     // params.color = "#2980b9";
    //     this.myChart.setOption(option);
    //   });
    // },
    queryInfo() {
      this.$http
        .queryInfo({
         params:{
            parentCode: this.code,
         }
        })
        .then(res => {
            this.data = res.data;
            this.loading=false
        })
    },
    findQuantity(){
      this.$http
        .findQuantity({
         params:{
            parentCode:"320500"|| this.code,
         }
        })
        .then(res => {
            this.bodyindustryLIst = res.data;
        })
    }
  },
};
</script>
<style lang="less" scoped>
.com-container {
  height: 100%;
  .col_wapper {
    color: #4adefe;
    text-align: center;
    font-size: 15px;
    .number {
      font-size: 30px;
      color: #f3db5c;
    }
    .people {
      color: #f3db5c;
    }
  }
  .center_border {
    border: 1px solid #4adefe;
    border-bottom: none;
    border-top: none;
  }
  .map {
    position: relative;
    background: url('../../../../assets/images/map.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    .switch{
      position: absolute;
      left: 0;
      top: 5%;
    }
    .region {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: start;
      color: #fff;
      position: absolute;

      width: 100px;
      height: 100px;
      background: url('../../../../assets/images/mapPotion.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
    .zhangjiagang {
      top: 18px;
      left: 198px;
    }
    .changshu {
      top: 116px;
      left: 316px;
    }
    .taicang {
      top: 143px;
      left: 420px;
    }
    .xiangcehngqu {
      top: 195px;
      left: 236px;
    }
    .kunshan {
      top: 234px;
      left: 360px;
    }
    .gongyeyuan {
      top: 239px;
      left: 294px;
    }
    .gusuqu {
      top: 247px;
      left: 243px;
    }
    .gaoxinqu {
      top: 228px;
      left: 165px;
    }
    .wuzhongqu {
      top: 311px;
      left: 132px;
    }
    .wujiang {
      top: 366px;
      left: 252px;
    }
    .zhangjiagangbaoshui {
      top: 10px;
      left: 295px;
    }
  }
}
</style>
